<template>
  <div ref="container" style="height:95%">

  </div>
</template>
<script>
// import { onMounted } from 'vue';
import { Gauge } from '@antv/g2plot';
import { ref, onMounted } from 'vue'
export default {
  // 组合式api
  setup() {
    // 存放vue变量 ref()函数
    let a = ref(0);
    let container = ref(null);
    let percent = ref(0)
    let initCharts = () => {
      //图表实例存放在
      const gauge = new Gauge(container.value, {
        percent: percent.value,
        range: {
          ticks: [0, 1 / 3, 2 / 3, 1],
          color: ['#F4664A', '#FAAD14', '#30BF78'],
        },
        indicator: {
          pointer: {
            style: {
              stroke: '#D0D0D0',
            },
          },
          pin: {
            style: {
              stroke: '#D0D0D0',
            },
          },
        },
        axis: {
          label: {
            formatter(v) {
              return Number(v) * 100;
            },
          },
          subTickLine: {
            count: 3,
          },
        },
        statistic: {
          content: {
            style: {
              color: 'rgba(0,0,0,0.65)',
              fontSize: 48,
            },
          },
        },
      });

      gauge.render();
      setInterval(()=>{
        if(percent.value<0.75){
          percent.value+=0.01
          gauge.changeData(percent.value)
        }else{
          percent.value=0.75
        }
      },100)
    }
    onMounted(initCharts);
    return {
      container
    }
  }
}
</script>
<style lang="scss">

</style>